import React, { useState, useEffect } from 'react';
import { Card, Table, Button, Modal, Form, Input, message, Select, Spin } from 'antd';
import { TagsOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import API_CONFIG from '../utils/apiConfig.js';

const LabelPage = ({ user }) => {
  const [tags, setTags] = useState([]);
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingTag, setEditingTag] = useState(null);
  const [form] = Form.useForm();
  // 添加配置相关状态
  const [configs, setConfigs] = useState([]);
  const [selectedConfig, setSelectedConfig] = useState(null);
  const [loadingConfigs, setLoadingConfigs] = useState(false);

  // 获取配置列表
  const fetchConfigs = async () => {
    setLoadingConfigs(true);
    try {
      const response = await API_CONFIG.fetch('configs', {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
      });
      
      const contentType = response.headers.get('content-type');
      if (contentType && contentType.includes('text/html')) {
        throw new Error('API返回HTML内容，路径可能错误');
      }
      
      const data = await response.json();

      console.log('获取到的配置数据:', data);
      
      if (Array.isArray(data)) {
        setConfigs(data);
      } else if (data && typeof data === 'object') {
        setConfigs([data]);
      } else {
        setConfigs([]);
      }
    } catch (error) {
      console.error('获取配置失败:', error);
      message.error('获取配置列表失败，使用模拟数据');
      // 使用模拟数据
      setConfigs([
        { id: 1, config_name: '默认配置' },
        { id: 2, config_name: '测试配置' }
      ]);
    } finally {
      setLoadingConfigs(false);
    }
  };

  // 获取标签列表
  const fetchTags = async (config = selectedConfig) => {
    setLoading(true);
    try {
      // 如果选中了配置，只获取该配置的标签
      let url = API_CONFIG.getURL('labels');
      if (config) {
        url = `${url}?config_id=${encodeURIComponent(config.id)}`;
      }
      
      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`获取标签数据失败: ${response.status}`);
      }
      
      // 从API获取标签对象列表，包含config_id、label_text和config_name
      const labelObjects = await response.json();

      console.log('从API获取的标签对象列表:', labelObjects);
      
      // 验证获取的数据格式
      if (!Array.isArray(labelObjects)) {
        throw new Error('API返回的数据格式不正确');
      }
      
      // 确保标签列表不为空
      if (labelObjects.length === 0) {
        console.warn('从API获取的标签列表为空');
        setTags([]);
        return;
      }
      
      // 将标签对象转换为组件需要的数据格式
      const tagsFromDB = labelObjects.map((labelObj) => ({
        id: labelObj.id,
        label_id: labelObj.label_id,
        name: labelObj.label_text,
        configId: labelObj.config_id || '',
        configName: labelObj.config_name || '未配置'
      }));
      
      setTags(tagsFromDB);
    } catch (error) {
      console.error('Failed to fetch tags:', error);
      message.error('标签列表获取失败');
      
      // 如果选中了配置，使用空列表；否则使用模拟数据
      if (config) {
        setTags([]);
      } else {
        // API调用失败且未选择配置时，使用模拟数据作为降级方案
        const mockTags = [
          { id: '1', name: '安全隐患', configId: '1', configName: '默认配置' },
          { id: '2', name: '异常行为', configId: '2', configName: '测试配置' }
        ];
        setTags(mockTags);
      }
    } finally {
      setLoading(false);
    }
  };

  // 初始化时获取数据
  useEffect(() => {
    fetchConfigs();
  }, []);

  // // 当配置列表更新时，自动选择第一个配置
  // useEffect(() => {
  //   if (configs.length > 0 && !selectedConfig) {
  //     setSelectedConfig(configs[0]);
  //   }
  // }, [configs, selectedConfig]);

  // 当选择的配置改变时，重新获取标签列表
  useEffect(() => {
    if (selectedConfig) {
      fetchTags(selectedConfig);
    } else {
      // 未选择配置时，清空标签列表
      setTags([]);
    }
  }, [selectedConfig]);

  // 打开添加/编辑标签的模态框
  const showModal = (tag = null) => {
    // 检查是否已选择配置
    if (!selectedConfig) {
      message.error('请先选择一个配置');
      return;
    }
    
    if (tag) {
      setEditingTag(tag);
      form.setFieldsValue({
        id: tag.id, // 设置标签ID，使用label_id字段
        labelId: tag.label_id, // 设置标签ID，使用label_id字段
        name: tag.name,
        configId: selectedConfig.id // 使用选中的配置ID
      });
    } else {
      setEditingTag(null);
      form.resetFields();
      // 默认使用选中的配置ID
      form.setFieldsValue({
        configId: selectedConfig.id
      });
    }
    setIsModalVisible(true);
  };

  // 关闭模态框
  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };

  // 保存标签信息
  const handleSave = async () => {
    try {
      // 检查是否已选择配置
      if (!selectedConfig) {
        message.error('请先选择一个配置');
        return;
      }
      
      const values = await form.validateFields();
      
      // 强制使用选中的配置ID
      const configIdStr = String(selectedConfig.id);
      
      if (editingTag) {
        // 编辑现有标签
        // 检查标签ID是否发生变化
        if (values.id !== editingTag.id) {
          // 如果标签ID发生变化，需要先删除旧标签，再创建新标签
          Modal.confirm({
            title: '确认修改标签ID',
            content: '修改标签ID将删除旧标签并创建新标签，确定要继续吗？',
            okText: '确定',
            cancelText: '取消',
            onOk: async () => {
              try {
                // 1. 先删除旧标签
                const deleteResponse = await fetch(`/api/labels/${encodeURIComponent(editingTag.id)}`, {
                  method: 'DELETE'
                });
                
                if (!deleteResponse.ok) {
                  const errorData = await deleteResponse.json();
                  throw new Error('删除旧标签失败: ' + (errorData.error || '未知错误'));
                }
                
                // 2. 再创建新标签
                const createResponse = await fetch('/api/labels', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({
                    label_id: Number(values.labelId), // 使用用户填写的标签ID
                    label_name: values.name,
                    config_id: configIdStr
                  })
                });
                
                if (!createResponse.ok) {
                  const errorData = await createResponse.json();
                  throw new Error('创建新标签失败: ' + (errorData.error || '未知错误'));
                }
                
                message.success('标签信息更新成功（标签ID已变更）');
                setIsModalVisible(false);
                form.resetFields();
                fetchTags(selectedConfig); // 重新获取标签列表
              } catch (error) {
                console.error('更新标签ID失败:', error);
                message.error(error.message || '更新标签ID失败，请重试');
              }
            }
          });
        } else {
          // 如果标签ID未发生变化，直接更新
          const response = await fetch(`/api/labels/${encodeURIComponent(editingTag.id)}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              label_id: Number(values.labelId), // 使用用户填写的标签ID
              label_name: values.name,
              config_id: configIdStr
            })
          });
          
          if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || errorData.details || '标签更新失败');
          }
          
          message.success('标签信息更新成功');
          setIsModalVisible(false);
          form.resetFields();
          fetchTags(selectedConfig); // 重新获取标签列表
        }
      } else {
        // 添加新标签
        const response = await fetch('/api/labels', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            label_id: Number(values.labelId), // 使用用户填写的标签ID
            label_name: values.name,
            config_id: configIdStr
          })
        });
        
        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.error + (errorData.details ? `: ${errorData.details}` : '') || '标签添加失败');
        }
        
        message.success('标签添加成功');
        setIsModalVisible(false);
        form.resetFields();
        fetchTags(); // 重新获取标签列表
      }
    } catch (error) {
      console.error('保存标签失败:', error);
      message.error(error.message || '保存标签失败，请重试');
    }
  };

  // 删除标签
  const handleDelete = (id) => {
    // 检查是否已选择配置
    console.log('删除标签ID:', id);
    if (!selectedConfig) {
      message.error('请先选择一个配置');
      return;
    }
    
    // 找到要删除的标签对象
    const tagToDelete = tags.find(tag => tag.id === id);
    if (!tagToDelete) return;
    
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除此标签吗？删除后相关视频的标签将会丢失。',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        try {
          const response = await fetch(`/api/labels/${encodeURIComponent(tagToDelete.id)}`, { method: 'DELETE' });
          
          if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || '标签删除失败');
          }
          
          message.success('标签删除成功');
          // 重新获取标签列表，确保数据一致性
          fetchTags();
        } catch (error) {
          console.error('删除标签失败:', error);
          message.error(error.message || '删除标签失败，请重试');
        }
      }
    });
  };

  // 表格列配置
  const columns = [
    {
      title: '配置代码',
      dataIndex: 'configId',
      key: 'configId',
      ellipsis: true
    },
    {
      title: '配置名称',
      dataIndex: 'configName',
      key: 'configName',
      ellipsis: true
    },
    {
      title: '标签ID',
      dataIndex: 'label_id',
      key: 'label_id',
      ellipsis: true
    },
    {
      title: '标签',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <div style={{ display: 'flex', gap: '8px' }}>
          <Button 
            type="link" 
            icon={<EditOutlined />} 
            onClick={() => showModal(record)}
            size="small"
            disabled={!selectedConfig} // 未选择配置时禁用
          >
            编辑
          </Button>
          <Button 
            type="link" 
            danger 
            icon={<DeleteOutlined />} 
            onClick={() => handleDelete(record.id)}
            size="small"
            disabled={!selectedConfig} // 未选择配置时禁用
          >
            删除
          </Button>
        </div>
      )
    }
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Card
        title={<div style={{ display: 'flex', alignItems: 'center' }}>
          <TagsOutlined style={{ marginRight: '8px' }} />
          标签管理
        </div>}
        extra={
          <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
            <div style={{ minWidth: '200px' }}>
              <Select
                placeholder="请选择配置"
                loading={loadingConfigs}
                value={selectedConfig?.id}
                onChange={(value) => {
                  const config = configs.find(c => c.id === value);
                  setSelectedConfig(config || null);
                }}
                style={{ width: '100%' }}
                options={configs.map(config => ({
                  value: config.id,
                  label: config.config_name
                }))}
              />
            </div>
            <Button 
              type="primary" 
              icon={<PlusOutlined />} 
              onClick={() => showModal()}
              disabled={!selectedConfig} // 未选择配置时禁用
            >
              添加标签
            </Button>
          </div>
        }
        style={{ marginBottom: '24px' }}
      >
        <Spin spinning={loadingConfigs}>
          {!selectedConfig ? (
            <div style={{ padding: '40px 0', textAlign: 'center', color: '#999' }}>
              <p>请先选择一个配置以查看和管理标签</p>
            </div>
          ) : (
            <Table
              columns={columns}
              dataSource={tags}
              rowKey="id"
              loading={loading}
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showTotal: (total) => `共 ${total} 个标签`
              }}
              scroll={{ x: 'max-content' }}
              locale={{
                emptyText: '当前配置暂无标签'
              }}
            />
          )}
        </Spin>
      </Card>

      {/* 添加/编辑标签的模态框 */}
      <Modal
        title={editingTag ? '编辑标签' : '添加标签'}
        open={isModalVisible}
        onOk={handleSave}
        onCancel={handleCancel}
        okText="保存"
        cancelText="取消"
        width={600}
        okButtonProps={{
          disabled: !selectedConfig
        }}
      >
        <Form
          form={form}
          layout="vertical"
          size="middle"
          style={{ marginTop: '16px' }}
        >
          {/* 配置选择显示为只读，实际使用上面选择的配置 */}
          <Form.Item
            label="配置信息"
            name="configDisplay"
            initialValue={selectedConfig ? `${selectedConfig.id} - ${selectedConfig.config_name}` : ''}
            rules={[
              { required: true, message: '请先在页面上方选择配置' }
            ]}
          >
            <Input readOnly placeholder="请先在页面上方选择配置" />
          </Form.Item>
          
          {/* 隐藏的配置ID字段，实际提交时使用选中的配置ID */}
          <Form.Item
            name="configId"
            hidden={true}
          >
            <Input />
          </Form.Item>
          
          {/* 标签ID字段 */}
          <Form.Item
            label="标签ID"
            name="labelId"
            rules={[
              { required: true, message: '请输入标签ID' },
              {
                validator: (_, value) => {
                  if (value === '' || value === undefined || value === null) {
                    return Promise.reject(new Error('请输入标签ID'));
                  }
                  const numValue = Number(value);
                  if (isNaN(numValue)) {
                    return Promise.reject(new Error('标签ID必须是数字'));
                  }
                  if (numValue < 0) {
                    return Promise.reject(new Error('标签ID不能小于0'));
                  }
                  return Promise.resolve();
                }
              }
            ]}
            tooltip="系统将自动生成标签ID，修改此值将删除旧标签并创建新标签"
          >
            <Input 
              placeholder="请输入标签ID"
              type="number"
              disabled={editingTag === null && false} // 新增模式下也可以修改，但实际上后端会忽略这个值
            />
          </Form.Item>
          
          <Form.Item
            label="标签名称"
            name="name"
            rules={[
              { required: true, message: '请输入标签名称' },
              { min: 1, max: 20, message: '标签名称长度应在1-20个字符之间' }
            ]}
          >
            <Input placeholder="请输入标签名称" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default LabelPage;
